import Vue from 'vue'
import Message from './message'

const MessageBox = Vue.extend(Message)

Message.install = function(options, type) {
  if (options === undefined || options === null) {
    options = {
      content: ''
    }
  } else if (typeof options === 'string' || typeof options === 'number') {
    options = {
      content: options
    }
    if (type !== undefined && options !== null) {
      options.type = type
    }
  }

  const instance = new MessageBox({
    data: options
  }).$mount()
  setTimeout(() => {
    if (document.querySelector('#fffffffffffffffff-message')) {
      const element = document.createElement('div')
      element.classList.add('fffffffffffffffff-mb')
      const htmlStr = `<div class="ffff-content fffffffffffffffff-${options.type}">${options.content}<i class="el-icon-${options.type} fffffffffffffffff-icon"></i></div>`
      element.innerHTML = htmlStr
      console.log('htmlStr', htmlStr)
      document.querySelector('#fffffffffffffffff-content').appendChild(element)
    } else {
      document.body.appendChild(instance.$el)
    }
  })
  Vue.nextTick(() => {
    instance.visible = true
  })
}
const types = ['success', 'warning', 'info', 'error']
types.forEach(type => {
  Message.install[type] = options => {
    if (typeof options === 'string') {
      options = {
        content: options
      }
    }
    options.type = type
    return Message.install(options)
  }
})
export default Message
